<template>
	<view class="recruit-online">
		<u-navbar title="在线招聘" :bgColor="bgColor" :autoBack="true"></u-navbar>
		<view class="detail-top oh" style="height: 594rpx;background-image: linear-gradient(#FFF8F3,#F8F8F8);">
			<view class="dis_flex ml30 mr30 mt20 pb20" :style="{ marginTop: statusHeight }">
				<view class="bac_f radius8 h64 dis_f" style="width: 610rpx;">
					<u--input placeholder="请输入你想要的职位" prefixIcon="search"  v-model="search" border="none" prefixIconStyle="font-size: 22px;color: #909399;margin-left:30rpx"></u--input>
				</view>
				<view class="fz28 lh10" @click="searchJob">搜索</view>
			</view>
			<view class="ro-swiper mt20 ml30 mr30"><u-swiper :list="roBanner" indicator indicatorMode="line" circular height="134"></u-swiper></view>
		</view>
		<view class="mr40 ml40">
			<u-tabs
				:list="toList"
				@click="tabClick"
				lineWidth="32"
				lineHeight="8"
				:lineColor="'#FD484B'"
				:activeStyle="{
					color: '#222',
					fontWeight: '600',
					fontSize: '15'
				}"
				:inactiveStyle="{
					color: '#999'
				}"
				itemStyle="padding-left: 12px; padding-right:12px;height: 40px;"
			>
				<view slot="right" style="padding-left: 4px;display: flex;align-items: center;">
					<view class="dis_f jc radius16 bac_e w120" style="height: 60rpx;" @click="areaShow">
						<view class="fz26 tf_33">地区</view>
						<view><image class="w16 ml12" style="height: 12rpx;" src="../../static/image/shaixuan.png" mode="aspectFill"></image></view>
					</view>
					<view class="ml10 dis_f jc radius16 bac_e w120" style="height: 60rpx;" @click="openfilteJobPop">
						<view class="fz26 tf_33">职位</view>
						<view><image class="w16 ml12" style="height: 12rpx;" src="../../static/image/shaixuan.png" mode="aspectFill"></image></view>
					</view>
				</view>
			</u-tabs>
		</view>
		<view class="ml24 mr24 mt32 pl30 oh pr30 bac_f">
			<view
				class="job-card mt36 p_re mb24 radius8 pl30 pr30"
				style="background-color: #FFF8F5;border: 1px solid #FFE9E5;min-height: 222rpx;"
				v-for="(item, index) in job_list"
				:key="index"
				@click="goWorkerDetail(item)"
			>
				<image class="w88 h40 p_ab" style="left: -12rpx; top:-16rpx" src="../../static/image/work_icon.png" mode="widthFix"></image>
				<view class="job-h1 dis_flex mt30">
					<view class="dis_f">
						<text class="fw fz32">{{ item.name }}</text>
					</view>
					<view class="h1-salary fz30 fw tf_4537">
						<text>{{ item.salary }}</text>
					</view>
				</view>
				<view class="job-h3 mt16">
					<view class="">
						<text v-if="item.label_arr[0].length!=0"  class="fz20  mr12  tac pl12 pr12 radius4" style="padding: 4rpx 12rpx;color: #713F2D;background-color: #FFDECA;" v-for="(value, i) in item.label_arr" :key="i">
							{{ value }}
						</text>
					</view>
				</view>
				<view class="job-h2 dis_flex mt20 fz26 tf_666 pb34">
					<view class="">
						<text>职位需求&nbsp;|&nbsp;{{ item.num }}人</text>
					</view>
					<view class="">
						<text>{{ item.city }}&nbsp;&nbsp;{{ item.district }}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-show="is_last" class="w tf_999 fz28 tac mt24">已经触碰到底线了~</view>
		<view class="w h100"></view>
		<!-- 弹出窗 -->
		<u-popup :show="openJopPopShow" mode="bottom" @close="jobClose" :round="8">
			<view class="pop-cart radius_5">
				<view class="pop-title dis_f radius_5 jc bac11" style="height: 98rpx;">
					<text class="fz34 tf33 ml238">筛选</text>
					<image @click="jobClose" class="w44 ml238" src="../../static/image/server_close.png" mode="widthFix"></image>
				</view>
				<view class="">
					<view class="mt34 fz26 tf_999 ml40">职位分类</view>
					<view class="mt24 ml30 dis_flex fww mr30">
						<view
							class="bac_f8 h80 bz dis_f jc fz28 tf_33 mt20 radius6"
							v-for="(v, i) in roList"
							:key="i"
							:class="{ active: c_nanny_list_s.indexOf(i) != -1 }"
							@click="menuClick(i)"
							style="width:216rpx;"
						>
							{{ v.name }}
						</view>
					</view>
				</view>
				<view class="btn ml30 mr30 radius8 mt48 tf h88 dis_f jc fz32 mb40" @click="submitFilt">确认</view>
			</view>
		</u-popup>
		<!-- 城市选择器 -->
		<u-picker
			:show="areaFilterPopshow"
			ref="uPicker"
			:columns="columns"
			confirmColor="#f14537"
			cancelColor="#f14537"
			@cancel="areaCancel"
			@confirm="confirm"
			@change="changeHandler"
		></u-picker>
	</view>
</template>

<script>
import { getCityInfo, getStreetInfo, jobOnline } from '@/config/api.js';
export default {
	data() {
		return {
			search:'',//搜索框
			statusHeight: '',
			city: '',
			district: '',
			c_nanny_list_s: [], //筛选选中项
			cur_type: '全职',
			is_last: false,
			last_page: '', //最后一页
			page: 1,
			job_list: [], //工作列表
			areaFilterPopshow: false,
			columns: [], //地区
			columnData: [],
			openJopPopShow: false,
			bgColor: 'rgba(255,255,255,0)',
			roBanner: ['https://cdn.uviewui.com/uview/swiper/swiper1.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper3.png'],
			toList: [
				{
					name: '全职'
				},
				{
					name: '零工'
				}
			],
			roList: [
				{
					name: '管理'
				},
				{
					name: '技工'
				},
				{
					name: '行政'
				},
				{
					name: '居家服务'
				},
				{
					name: '月嫂'
				},
				{
					name: '护工'
				},
				{
					name: '客服'
				},
				{
					name: '互联网'
				},
				{
					name: '保姆'
				}
			]
		};
	},
	onLoad() {
		this.getCityInfo();
		this.getJobInfo();
		let res = wx.getSystemInfoSync();
		this.statusHeight = res.statusBarHeight + 50 + 'px';
	},
	onPageScroll: function(e) {
		this.bgColor = '#fff';
		if (e.scrollTop == 0) {
			this.bgColor = 'rgba(255,255,255,0)';
		}
	},
	methods: {
		//输入框搜索
		searchJob(){
			jobOnline({name:this.search}).then(res=>{
				console.log(res);
				if(res.length!==0){
					this.job_list = res.list
					this.search = ''
				}else{
					uni.showModal({
						title:'提示',
						content:'暂无此信息',
					})
					this.search = ''
				}
			})
		},
		jobClose(){
			this.openJopPopShow = false
			setTimeout(()=>{
				uni.showTabBar()
			},500)
		},
		areaCancel(){
			this.areaFilterPopshow = false
			setTimeout(()=>{
				uni.showTabBar()
			},500)
		},
		//地区弹窗
		areaShow(){
			this.areaFilterPopshow = true
			uni.hideTabBar()
		},
		// 提交选中项
		submitFilt() {
			let name = [];
			this.c_nanny_list_s.forEach((v, i) => {
				name.push(this.roList[v].name);
			});
			let city = this.city;
			let district = this.district;
			let name_s = name.toString();
			jobOnline({ page: this.page, type: this.cur_type, name: name_s, city: city, district: district }).then(res => {
				console.log('kng', res);
				if (res.length != 0) {
					this.job_list = res.list;
				} else {
					this.job_list = [];
				}
			});
			this.c_nanny_list_s = [];
			this.openJopPopShow = false;
			setTimeout(()=>{
				uni.showTabBar()
			},500)
		},
		//点击选择下拉框筛选项
		menuClick(i) {
			if (this.c_nanny_list_s.indexOf(i) == -1) {
				console.log(i); //打印下标
				this.c_nanny_list_s.push(i); //选中添加到数组里
			} else {
				this.c_nanny_list_s.splice(this.c_nanny_list_s.indexOf(i), 1); //取消
			}
		},
		//tab切换
		tabClick(item) {
			this.cur_type = item.name;
			jobOnline({ page: this.page, type: this.cur_type }).then(res => {
				this.job_list = res.list;
			});
		},
		//跳转工人详情
		goWorkerDetail(item) {
			uni.navigateTo({
				url: '../../page_job/jobDetail/jobDetail?id=' + item.id
			});
		},
		//触底加载
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page = this.page + 1;
				console.log('page', this.page);
				jobOnline({ page: this.page }).then(res => {
					console.log(res);
					res.list.forEach(v => {
						this.job_list.push(v);
					});
				});
			} else {
				this.is_last = true;
			}
			console.log(this.job_list);
		},
		//获取职位列表
		getJobInfo() {
			jobOnline({ page: this.page }).then(res => {
				this.job_list = res.list;
			});
		},
		//筛选地区
		getCityInfo() {
			getCityInfo().then(res => {
				this.columns = res;
			});
			getStreetInfo().then(res => {
				this.columnData = res;
			});
		},
		changeHandler(e) {
			const {
				columnIndex,
				value,
				values, // values为当前变化列的数组内容
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker
			} = e;
			// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			if (columnIndex === 0) {
				// picker为选择器this实例，变化第二列对应的选项
				picker.setColumnValues(1, this.columnData[index]);
			}
		},
		// 回调参数为包含columnIndex、value、values
		confirm(e) {
			console.log('confirm', e);
			this.areaFilterPopshow = false;
			this.city = e.value[0];
			this.district = e.value[1];
			jobOnline({ page: this.page, type: this.cur_type, city: this.city, district: this.district }).then(res => {
				if (res.length != 0) {
					res.list.forEach(v => {
						this.job_list.push(v);
					});
				} else {
					this.job_list = [];
				}
			});
			setTimeout(()=>{
				uni.showTabBar()
			},500)
		},
		openfilteJobPop() {
			this.openJopPopShow = true;
			uni.hideTabBar();
		}
	}
};
</script>

<style lang="scss" scoped>
.recruit-online {
	/deep/ .u-navbar__content__left {
		display: none;
	}
}
.active {
	border: 1px solid #f14537;
	color: #f14537;
	background-color: rgba(241, 69, 55, 0.05);
}
</style>
